<template>
  <d-scroll-view  @refresherrefresh="getDetail" :refresher-triggered="triggered">
    <proj-detail-layout :process-instance-id="processInstanceId" :project-number="projectNumber">
    <d-forms label-width="230rpx">
      <d-forms-item label="申请人" :input="form.applicantName"></d-forms-item>
      <d-forms-item label="最终用户" :input="form.useUnitName"></d-forms-item>
      <d-forms-item label="正式合同审批" :type="DFormInputType.DICT" :dict-type="PM_DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :input="form.virtualContractResult"></d-forms-item>
      <d-forms-item label="虚拟合同审批" :type="DFormInputType.DICT" :dict-type="PM_DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :input="form.contractResult"></d-forms-item>
      <view>
        <view class="form-title-1">申请理由</view>
        <d-card>
          <d-forms-item disabled :input="form.applyReason"></d-forms-item>
        </d-card>
      </view>
      <view>
        <view class="form-title-1">采购清单附件</view>
        <d-card>
          <pm-file-upload readonly :files="form.itemAttach"></pm-file-upload>
        </d-card>
      </view>
      <view>
        <view class="form-title-1">比价结果综述</view>
        <d-card>
          <d-forms-item disabled :input="form.comparisonResult"></d-forms-item>
        </d-card>
      </view>
      <view>
        <view class="form-title-1">供应商选项</view>
        <view
          v-for="(item, idx) in form.comparisons"
          :key="`price-supplier_`+idx"
          :class="[
            'mb20 price-supplier-box',
            {['is-check']: item.checked}
          ]"
        >
          <view v-if="hasPerm([PCC_APPLY_CC])" @click="handleCheckSupplier(item)" class="check-box flex flex-row justify-center align-center">
            <iconfont v-if="item.checked" color="#00D64F" name="icon-ok1"></iconfont>
          </view>
          <view>
            <view @click="handleCheckSupplier(item)" class="mb10">
              <tab-title>
                <template #suffix>
                  <iconfont name="icon-ERP_gongyingshang"></iconfont>
                </template>
                <text>{{ item.supplier }}</text>
              </tab-title>
            </view>
            <view @click="handleCheckSupplier(item)" class="mb10">
              <tab-title>
                <template #suffix>
                  <iconfont name="icon-renminbi"></iconfont>
                </template>
                <view>总价：<text class="tab-title-value">{{ formatRMB(item.amount) }}</text></view>
              </tab-title>
            </view>
            <d-card>
              <view class="form-title-2">说明</view>
              <text>{{ item.introduction }}</text>
              <view class="form-title-2">附件</view>
              <pm-file-upload readonly :files="item.attach"></pm-file-upload>
              <view class="form-title-2">备注</view>
              <uni-easyinput v-if="hasPerm([PCC_APPLY_CC])" type="textarea" v-model="item.checkRemarks" placeholder="请输入供应商选中备注"></uni-easyinput>
              <d-forms-item v-else disabled :input="item.checkRemarks"></d-forms-item>
            </d-card>
          </view>
        </view>
      </view>
    </d-forms>
  </proj-detail-layout>
  </d-scroll-view>
</template>

<script setup lang="ts">
import ProjDetailLayout from "@/components/ProjDetailLayout/index.vue";
import {usePccApplyApi} from "@/api/pm/project/pccApply";
import {DFormInputType, ProcessBusinessType} from "@/utils/enum";
import {PM_DICT_TYPE} from "@/utils/pmDict";
import {formatRMB} from "@/utils";
import TabTitle from "@/components/TabTitle/index.vue";
import {hasPerm} from "@/utils/pm";

defineOptions({ name: 'PriceComparisonApply'})

const initForm = {
  id: null,
  projectNumber: null,
  virtualContractResult: null,
  contractResult: null,
  applicant: null,
  applicantName: null,
  applyReason: null,
  applyStatus: null,
  itemAttach: null,
  comparisonResult: null,
  processInstanceId: null,
  storaged: null,
  result: null,
  comparisons: null,
  projectName: null,
  salesManager: null,
  salesManagerName: null,
  useUnit: null,
  useUnitName: null,
}
const form = ref<PriceComparisonForm>(initForm)
const triggered = ref<boolean>(false);
function getDetail() {
  if (processInstanceId.value) {
    triggered.value = true;
    usePccApplyApi().getPccApplyByProcess(processInstanceId.value).then(res => {
      if (res.code === 0) {
        form.value = res.data || initForm
      }
    }).finally(() => {
      triggered.value = false;
    })
  }
}

// 供应商变更权限
function getSupplier() {
  return new Promise((resolve, reject) => {
    if (!hasPerm([PCC_APPLY_CC])) {
      resolve({});
    } else {
      const isCheck = form.value.comparisons.some(item => item.checked);
      if (isCheck) {
        const checkList = form.value.comparisons.filter(item => item.checked).map(item => {
          return {
            ...item,
            comparisonId: item.id,
          }
        });
        const checkName = form.value.comparisons.filter(item => item.checked).map(item => item.supplier).join(',')
        uni.showModal({
          content: `此操作将选定【${checkName}】作为供应商并通过审批`,
          success: function(res) {
            if (res.confirm) {
              resolve({
                id: form.value.id,
                checks: checkList,
                '@businessDataType': ProcessBusinessType.CHECK_SUPPLIER,
              })
            }
          }
        })
      } else {
        uni.showToast({
          icon: 'error',
          title: '请至少选定一家供应商！'
        })
        reject();
      }
    }
  })
}

const PCC_APPLY_CC = 'project:purchase-construction-contract-apply:comparisonCheck'
function handleCheckSupplier(item: PriceComparisonSupplier) {
  if (!hasPerm([PCC_APPLY_CC])) {
    uni.showToast({
      icon: 'error',
      title: '没有变更供应商权限！'
    })
    return;
  } else {
    item.checked = !item.checked;
  }
}

const projectNumber = ref<string>(null);
const processInstanceId = ref<string>(null);
onLoad((query) => {
  projectNumber.value = query['project_number']
  processInstanceId.value = query['process_instance_id']
  getDetail();
})

defineExpose({
  getSupplier,
})
</script>

<style scoped lang="scss">
.price-supplier-box {
  border-radius: 16rpx;
  border: 4rpx dashed #dcdfe6;
  padding: 20rpx;
  position: relative;

  .check-box {
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    background-color: #f1f1f1;
    border: 4rpx solid #dcdfe6;
    left: -20rpx;
    top: -20rpx;
    border-radius: 50%;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .12);
    font-size: 50rpx;

    .icon-ok {
      background-color: transparent;
    }
  }


}


.price-supplier-box.is-check {
  border: 4rpx dashed #409eff;

  .check-box {
    background-color: #fff;
  }
}


.tab-title-value {
  font-family: DIN-Alternate;
  font-size: 40rpx;
  font-weight: 700;
}
</style>
